<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">技师信息</block>
		</cu-custom>
		<view class="padding">
			<view class="padding-sm bg-white margin-bottom-sm message-tips radius-xl text-error"
				v-if="form.message && form.examine === 3">
				{{ form.message }}
			</view>
			<view class="padding-sm bg-white radius-xl form">
				<view class="item padding-sm crow item-center">
					<view class="name margin-bottom-sm">技师图片({{ form.thumb.length }}/9)</view>
					<u-upload :fileList="form.thumb" name="thumb" @afterRead="afterRead" @delete="deletePic" multiple
						:maxCount="9" width="calc((100vw - 78px) / 3 - 8px)" height="calc((100vw - 78px) / 3 - 8px)"
						:disabled="formDisabled" :deletable="!formDisabled"></u-upload>
				</view>
				<view class="item padding-sm crow">
					<view class="name">姓名</view>
					<input type="text" placeholder="请输入姓名" class="text-right" v-model="form.name" :disabled="formDisabled">
				</view>
				<view class="item padding-sm crow">
					<view class="name">年龄</view>
					<input type="number" placeholder="请输入年龄" class="text-right" v-model="form.age" maxlength="2"
						:disabled="formDisabled">
				</view>
				<view class="item padding-sm crow">
					<view class="name">手机号码</view>
					<input type="tel" placeholder="请输入手机号码" class="text-right" v-model="form.mobile" maxlength="11"
						:disabled="formDisabled">
				</view>
				<view class="item padding-sm crow">
					<view class="name">工作经验</view>
					<view class="crow">
						<input type="number" placeholder="请输入工作经验" class="text-right" v-model="form.work_meet" maxlength="2"
							:disabled="formDisabled">
						<view class="padding-left-xs">年</view>
					</view>

				</view>
				<view class="item padding-sm crow">
					<view class="name">意向城市</view>
					<view @tap="!formDisabled && $refs.xRegionsRef.show({
						level: 1
					})">
						<template v-if="form.city_id">{{ form.province }} {{ form.city }}</template>
						<template v-else>
							<text class="text-gray">请选择城市</text>
						</template>
						<text class="cuIcon-right"></text>
					</view>
				</view>
				<view class="item padding-sm crow">
					<view class="name">性别</view>
					<view @tap="!formDisabled && (genderShow = true)">
						<template v-if="form.gender">
							{{ form.gender_text }}
						</template>
						<template v-else>
							<text class="text-gray">请选择性别</text>
						</template>
						<text class="cuIcon-right"></text>
					</view>
				</view>
				<view class="item padding-sm crow item-center"
					v-if="WEBCONFIG && WEBCONFIG.technician_qualifications && WEBCONFIG.technician_qualifications.length > 0">
					<view class="name margin-bottom-sm">
						从业资质({{ form.qualifications.length }}/{{ WEBCONFIG.technician_qualifications.length }})</view>
					<u-upload :fileList="form.qualifications" name="qualifications" @afterRead="afterRead"
						@delete="deletePic" multiple :maxCount="WEBCONFIG.technician_qualifications.length"
						width="calc((100vw - 78px) / 3 - 8px)" height="calc((100vw - 78px) / 3 - 8px)"
						:disabled="formDisabled" :deletable="!formDisabled"></u-upload>
					<view class="name margin-top-sm text-sm">需要上传证书：{{ WEBCONFIG.technician_qualifications.join('、') }}
					</view>
				</view>
			</view>

			<view class="padding margin-top-lg">
				<view class="flex flex-direction">
					<template v-if="form.examine == 0">
						<button class="cu-btn china-btn-bg lg round" disabled>审核中</button>
					</template>
					<template v-else>
						<button class="cu-btn china-btn-bg lg round" @click="submit()">保存</button>
					</template>
				</view>
			</view>
		</view>

		<!-- 选择意向城市 -->
		<x-regions ref="xRegionsRef" @selected="selectedRegions" />

		<!-- 选择性别 -->
		<u-picker :show="genderShow" keyName="name"
			:columns="[[{ name: '男', value: 'man' }, { name: '女', value: 'woman' }]]" confirmColor="var(--theme-color)"
			@cancel="genderClose" @confirm="genderConfirm">
		</u-picker>
	</view>
</template>

<script>
import { mapState } from 'vuex'
let map;
export default {
	data() {
		return {
			genderShow: false,
			mch: null,
			form: {
				age: '',
				mch_id: '',
				thumb: [],
				qualifications: [],
				province_id: "",
				province: '',
				city_id: "",
				city: '',
				gender: '',
				gender_text: "",
				mobile: "",
				name: "",
				examine: null,
				work_meet: "",
				message: "",
				latitude: "",
				longitude: "",
			},
		};
	},
	computed: {
		formDisabled() {
			return this.form.examine === 1 || this.form.examine === 0;
		},
		...mapState({
			WEBCONFIG: state => state.WEBCONFIG
		})
	},
	onLoad(options) {
		map = this.$utils.useMap(() => {
			this.getLocation();
		});
		if (options.mch_id) {
			this.$utils.$api.Mch.details(options.mch_id).then(data => {
				this.mch = data;
				this.mch_id = options.mch_id;
			})
		}
		this.getInfo();
	},
	methods: {
		getLocation() {
            if(!map.isReady()){return;}
			map.getCurrentPosition().then((result) => {
				this.form.latitude = result.position.lat
				this.form.longitude = result.position.lng
			}).catch(() => {
			});
		},
		getInfo() {
			if (!this.$store.getters.hasLogin) return;
			this.$utils.$api.Technician.info().then(data => {
				this.form = data;
			}).catch(err => { })
		},
		submit() {
			map.getCurrentPosition().then((result) => {
				this.form.latitude = result.position.lat
				this.form.longitude = result.position.lng
			}).catch(() => {
			});
			this.$utils.$api.Technician.apply(this.form).then(res => {
				this.$utils.$message.success(res.msg);
				this.getInfo();
			}).catch(err => {
				this.$utils.$message.error(err.msg);
			})
		},
		selectedRegions(value) {
			this.form.province_id = value.province_id;
			this.form.province = value.province;
			this.form.city_id = value.city_id;
			this.form.city = value.city;
		},
		afterRead(e) {
			for (let i = 0; i < e.file.length; i++) {
				const file = e.file[i];
				this.$utils.$api.Upload.upload({
					name: 'file',
					filePath: file.url,
				}).then(res => {
					switch (e.name) {
						case 'qualifications':
							this.form.qualifications.push({
								url: res.data.url
							});
							break;
						case 'thumb':
							this.form.thumb.push({
								url: res.data.url
							});
							break;
						default:
							break;
					}
				}).catch(err => {
					this.$utils.$message.error(err.msg);
				})
			}
		},
		genderConfirm(e) {
			this.form.gender = e.value[0].value;
			this.form.gender_text = e.value[0].name;
			this.genderClose();
		},
		genderClose(e) {
			this.genderShow = false;
		},
		deletePic(e) {
			if (this.formDisabled) return;
			uni.showActionSheet({
				title: '删除相册图片',
				itemList: ['删除'],
				itemColor: '#FF0000',
				success: () => {
					if (e.file.id) {
						this.$utils.$api.Technician.deleteTechnicianImage({
							name: e.name,
							id: e.file.id
						}).then(res => {
							switch (e.name) {
								case 'qualifications':
									this.form.qualifications.splice(e.index, 1);
									break;
								case 'thumb':
									this.form.thumb.splice(e.index, 1);
									break;
								default:
									break;
							}
						}).catch((err) => {
							this.$utils.$message.error(err.msg);
						})
					} else {
						switch (e.name) {
							case 'qualifications':
								this.form.qualifications.splice(e.index, 1);
								break;
							case 'thumb':
								this.form.thumb.splice(e.index, 1);
								break;
							default:
								break;
						}
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.form {
	.item {
		justify-content: space-between;
		margin-bottom: 30upx;
	}

	.item.item-center {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.border {
		border: 1px solid #999999;
	}
}

.mch-title {
	font-weight: bold;
}

.text-sm {
	font-size: 24upx;
}

.mch-tips {
	font-size: 24upx;
	color: var(--theme-color);
	border: 1px solid var(--theme-color);
}

.message-tips {
	font-size: 24upx;
	color: $u-error;
	border: 1px solid $u-error;
}

.examine-tips {
	font-size: 24upx;
	color: $u-info;
	border: 1px solid $u-info;
}
</style>
